<template>
  <div class="NavList">
    <div class="container nva_container">
      <div class="nav_menu">
        <p  @click="showul">
          <i class="icon_menu"></i>
          快速找医生
        </p>
        <ul class="nav_menu_list" v-show="ulshow">
          <li v-for="menu in menuList" @mouseover="showChild(menu)" @mouseout="hideChild(menu)">
            <i :class="menu.iconClass"></i>
            <span>{{ menu.title }}</span>
            <ul v-show="menu.childShow" class="children_box">
              <li v-for="listChild in menu.childList">{{ listChild.title }}</li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="nav_tab">
        <el-menu
          :default-active="activeIndex"
          mode="horizontal"
          @select="handleSelect"
          router
        >
          <el-menu-item
            :index="list.url"
            v-for="(list,index) in navList"
            :key="index"
          >
            {{ list.title }}
          </el-menu-item>
        </el-menu>


      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: '',
    data() {
      return {
        ulshow:false,
        activeIndex: "/",
        navList: [
          {title: "首页", index: '1', url: '/'},
          {title: "预约挂号", index: '2', url: '/Appointment'},
          {title: "在线问诊", index: '3', url: '/OnlineInquiry'},
          {title: "在线商城", index: '4', url: '/OnlineMall'},
          {title: "健康讲堂", index: '5', url: '/HealthLecture'},
          {title: "名医问答", index: '6', url: '/QuestionDoctor'},
          {title: "健康资讯", index: '7', url: '/HealthInformation'},
        ],
        menuList: [
          {
            title: '男科',
            iconClass: 'icon_nk',
            childShow: false,
            childList: [
              {title: '前列腺炎', url: ''},
              {title: '前列腺癌', url: ''},
              {title: '前列腺增生', url: ''},
              {title: '精索静脉曲张', url: ''},
              {title: '阳痿', url: ''},
              {title: '早泄', url: ''},
              {title: '勃起障碍', url: ''},
              {title: '膀胱炎', url: ''},
              {title: '梅毒', url: ''},
              {title: '尖锐湿疣', url: ''},
              {title: '慢性淋病性尿道炎', url: ''},
              {title: '逆行射精', url: ''},
              {title: '尿失禁', url: ''},
              {title: '泌尿系统感染', url: ''},
            ]
          },
          {
            title: '妇产科',
            iconClass: 'icon_fck',
            childShow: false,
            childList: [
              {title: '不孕', url: ''},
              {title: '子宫肌瘤', url: ''},
              {title: '卵巢囊肿', url: ''},
              {title: '阴道炎', url: ''},
              {title: '多囊卵巢综合症', url: ''},
              {title: '月经不调', url: ''},
              {title: '输卵管堵塞', url: ''},
              {title: '宫颈癌', url: ''},
              {title: '盆腔炎', url: ''},
              {title: '子宫内膜异位症', url: ''},
              {title: '子宫内膜增生', url: ''},
              {title: '宫外孕', url: ''},
              {title: '产后出血', url: ''},
              {title: '早产', url: ''},
              {title: '妊高症', url: ''},
              {title: '流产', url: ''},
              {title: '自然流产', url: ''},
              {title: '子宫脱垂', url: ''},
              {title: '产后抑郁症', url: ''},
              {title: '多乳房', url: ''},
            ]
          },
          {
            title: '儿科',
            iconClass: 'icon_ek',
            childShow: false,
            childList: [
              {title: '小儿哮喘', url: ''},
              {title: '小儿支气管肺炎', url: ''},
              {title: '小儿腹泻', url: ''},
              {title: '小儿癫痫', url: ''},
              {title: '小儿肾病综合症', url: ''},
              {title: '小儿厌食', url: ''},
              {title: '先天性倾斜', url: ''},
              {title: '小儿疝气', url: ''},
              {title: '小儿湿疹', url: ''},
              {title: '维生素D缺乏病', url: ''},
              {title: '小儿血管瘤', url: ''},
              {title: '唐氏综合症', url: ''},
              {title: '小儿缺铁性贫血', url: ''},
              {title: '性早熟', url: ''},
              {title: '新生儿黄疸', url: ''},
              {title: '小儿原发性肾病综合症', url: ''},
            ]
          },
          {
            title: '眼科',
            iconClass: 'icon_yk',
            childShow: false,
            childList: [
              {title: '白内障', url: ''},
              {title: '青光眼', url: ''},
              {title: '近视', url: ''},
              {title: '弱视', url: ''},
              {title: '结膜炎', url: ''},
              {title: '黄斑变性', url: ''},
              {title: '玻璃体混浊', url: ''},
              {title: '斜视', url: ''},
              {title: '角膜炎', url: ''},
            ]
          },
          {
            title: '耳鼻喉科',
            iconClass: 'icon_ebhk',
            childShow: false,
            childList: [
              {title: '鼻炎', url: ''},
              {title: '鼻窦炎', url: ''},
              {title: '过敏性鼻炎', url: ''},
              {title: '中耳炎', url: ''},
              {title: '三叉神经痛', url: ''},
              {title: '腺样体肥大', url: ''},
              {title: '鼻咽癌', url: ''},
              {title: '美尼尔综合症', url: ''},
            ]
          },
          {
            title: '口腔科',
            iconClass: 'icon_kqk',
            childShow: false,
            childList: [
              {title: '牙龈炎', url: ''},
              {title: '龋齿', url: ''},
              {title: '牙周炎', url: ''},
              {title: '牙髓炎', url: ''},
              {title: '口腔癌', url: ''},
              {title: '口腔溃疡', url: ''},
              {title: '口腔偏平台癣', url: ''},
              {title: '口腔黏膜白斑', url: ''},
              {title: '牙周炎', url: ''},
              {title: '牙齿畸形', url: ''},
              {title: '颞下颌关节紊乱综合症', url: ''},
            ]
          },
          {
            title: '皮肤科',
            iconClass: 'icon_pfk',
            childShow: false,
            childList: [
              {title: '痤疮', url: ''},
              {title: '湿疹', url: ''},
              {title: '黑色素瘤', url: ''},
              {title: '表皮痣', url: ''},
              {title: '尖锐湿疣', url: ''},
              {title: '脚气', url: ''},
              {title: '毛囊炎', url: ''},
              {title: '脂溢性皮炎', url: ''},
            ]
          },
          {
            title: '呼吸内科',
            iconClass: 'icon_hxnk',
            childShow: false,
            childList: [
              {title: '哮喘', url: ''},
              {title: '肺炎', url: ''},
              {title: '流感', url: ''},
              {title: '支气管炎', url: ''},
              {title: '睡眠呼吸暂停综合症', url: ''},
              {title: '支气管扩张', url: ''},
              {title: '喉炎', url: ''},
              {title: '慢性支气管炎', url: ''},
            ]
          },
          {
            title: '中医科',
            iconClass: 'icon_zyk',
            childShow: false,
            childList: [
              {title: '颈椎病', url: ''},
              {title: '糖尿病', url: ''},
              {title: '腰椎间盘突出症', url: ''},
              {title: '失眠', url: ''},
              {title: '痛风', url: ''},
              {title: '高血压', url: ''},
              {title: '针灸推拿', url: ''},
            ]
          },
          {
            title: '其他科室',
            iconClass: 'icon_qtk',
            childShow: false,
            childList: [
              {title: '前列腺', url: ''},
            ]
          }
        ]
      };
    },
    methods: {
      showul(){
       this.ulshow= this.ulshow?false:true
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      showChild: (item) => {
        //显示子级
        item.childShow = true
      },
      hideChild: (item) => {
        //隐藏子级
        item.childShow = false
      }
    }
  }
</script>

<style scoped>
  .NavList {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .NavList .nva_container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /*左侧部分*/
  .NavList .nav_menu {
    min-width: 200px;
    height: 100%;
    margin-right: 40px;
    position: relative;
  }

  .NavList .nav_menu > p {
    width: 100%;
    height: 100%;
    background: rgba(18, 141, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 1px;
    cursor: pointer;
  }

  .NavList .nav_menu .icon_menu {
    display: block;
    width: 16px;
    height: 14px;
    background: url("../../common/img/icon/icon_menu.png") no-repeat;
    background-size: contain;
    margin-right: 20px;
  }

  .NavList .nav_menu_list {
    padding-top: 2px;
    height: 402px;
    width: 100%;
    position: absolute;
    top: 40px;
    left: 0;
    background: rgba(18, 141, 255, .8);
    z-index: 99;
  }

  .NavList .nav_menu_list > li {
    /*父级*/
    display: flex;
    align-items: center;
    height: 40px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
  }

  .NavList .nav_menu_list > li:hover {
    background: #fff;
    color: #128DFF;
  }

  .NavList .nav_menu_list > li:hover:before {
    content: "";
    display: block;
    width: 4px;
    height: 28px;
    background: rgba(27, 152, 253, 1);
    position: absolute;
  }

  .NavList .nav_menu_list > li i {
    display: block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-image: url("../../common/img/icon/kslb.png");
    margin-right: 10px;
    margin-left: 40px;
  }

  .NavList .nav_menu_list > li i.icon_nk {
    background-position: 0 0;
  }

  .NavList .nav_menu_list > li i.icon_fck {
    background-position: 0 -30px;
  }

  .NavList .nav_menu_list > li i.icon_ek {
    background-position: 0 -60px;
  }

  .NavList .nav_menu_list > li i.icon_yk {
    background-position: 0 -90px;
  }

  .NavList .nav_menu_list > li i.icon_ebhk {
    background-position: 0 -120px;
  }

  .NavList .nav_menu_list > li i.icon_kqk {
    background-position: 0 -150px;
  }

  .NavList .nav_menu_list > li i.icon_pfk {
    background-position: 0 -180px;
  }

  .NavList .nav_menu_list > li i.icon_hxnk {
    background-position: 0 -210px;
  }

  .NavList .nav_menu_list > li i.icon_zyk {
    background-position: 0 -240px;
  }

  .NavList .nav_menu_list > li i.icon_qtk {
    background-position: 0 -270px;
  }

  .NavList .nav_menu_list > li:hover i.icon_nk {
    background-position: -30px 0;
  }

  .NavList .nav_menu_list > li:hover i.icon_fck {
    background-position: -30px -30px;
  }

  .NavList .nav_menu_list > li:hover i.icon_ek {
    background-position: -30px -60px;
  }

  .NavList .nav_menu_list > li:hover i.icon_yk {
    background-position: -30px -90px;
  }

  .NavList .nav_menu_list > li:hover i.icon_ebhk {
    background-position: -30px -120px;
  }

  .NavList .nav_menu_list > li:hover i.icon_kqk {
    background-position: -30px -150px;
  }

  .NavList .nav_menu_list > li:hover i.icon_pfk {
    background-position: -30px -180px;
  }

  .NavList .nav_menu_list > li:hover i.icon_hxnk {
    background-position: -30px -210px;
  }

  .NavList .nav_menu_list > li:hover i.icon_zyk {
    background-position: -30px -240px;
  }

  .NavList .nav_menu_list > li:hover i.icon_qtk {
    background-position: -30px -270px;
  }
  .NavList .nav_menu_list > li .children_box {
    position: absolute;
    top: 2px;
    right: -400px;
    width: 400px;
    height: 400px;
    background: #fff;
    padding: 20px;
    overflow: hidden;
    border-right:1px solid rgba(18,141,255,1);
    border-bottom:1px solid rgba(18,141,255,1);
  }
  .NavList .nav_menu_list > li .children_box > li {
    /*子级*/
    float: left;
    font-size: 12px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    margin-right: 10px;
    margin-bottom: 20px;
    padding-right: 10px;
    border-right: 1px solid #ddd;
    line-height: 1;
  }

  .NavList .nav_menu_list > li .children_box > li:hover {
    color: #128DFF;
  }

  /*右侧部分*/
  .NavList .nav_tab {
    height: 100%;
  }

  .NavList .nav_tab > ul {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: none;
  }

  .NavList .nav_tab li {
    height: 100%;
    margin-right: 60px;
    font-size: 18px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    border: none;
    padding: 0;
  }

  .NavList .nav_tab li:last-child {
    margin-right: 0;
  }

  .NavList .nav_tab li:hover,
  .is-active {
    color: rgba(18, 141, 255, 1) !important;
  }


</style>
